<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="./static/css/typo.css">
    <link rel="stylesheet" href="./static/css/animate.css">
    <link rel="stylesheet" href="./static/lib/prism/prism.css">
    <link rel="stylesheet" href="./static/lib/tocbot/tocbot.css">
    <link rel="stylesheet" href="./static/css/me.css">
    <title>xiangqing</title>
</head>

<body>
    <!--navgation-->
    <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">Blog</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class=" small home icon"></i>Home</a>
                <a href="#" class="m-item item m-mobile-hide"><i class=" small idea icon"></i>Category</a>
                <a href="#" class="m-item item m-mobile-hide"><i class=" small tags icon"></i>Tags</a>
                <a href="#" class="m-item item m-mobile-hide"><i class=" small clone icon"></i>Tags</a>
                <a href="#" class="m-item item m-mobile-hide"><i class=" small info icon"></i>AboutMe</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui icon inverted transparent input">
                        <input type="text" placeholder="Search....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>

    <!--main body content-->
    <div class="m-container-small m-padded-tb-big animated pulse">
        <div class="ui container">
            <div class="ui top attached segment">
                <div class="ui horizontal link list">
                    <div class="item">
                        <img src="https://picsum.photos/id/1000/800/450" alt="" class="ui avatar image">
                        <a href="#" class="content">GeniusTuang</a>
                    </div>
                    <div class="item">
                        <i class="calender icon"></i>2019-08-27
                    </div>
                    <div class="item">
                        <i class="eye icon"></i>2342
                    </div>
                </div>
            </div>
            <div class="ui attached segment">
                <!-- picture processing -->
                <img src="https://picsum.photos/id/1018/800/450" alt="" class="ui fluid rounded img">
            </div>
            <div class="ui attached padded segment">
                <!-- details -->
                <div class="ui right aligned basic segment">
                    <div class="ui orange basic label">Original</div>
                </div>

                <h2 class="ui center aligned header">A list about deliberate learing</h2>

                <pre><code class="language-css">p {color: red}</code></pre>
                <br>

                <div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large">
                    <p>i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir
                        after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me
                    </p>
                    <h2>1</h2>
                    <p>i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir
                        after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me
                    </p>
                    <h2>2</h2>
                    <p>i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir
                        after leaving me
                    </p>
                    <h2>3</h2>
                    <p>i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir
                        after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me
                    </p>
                    <h2>4</h2>
                    <p>i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir
                        after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me
                    </p>
                    <h2>5</h2>
                    <p>i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir
                        after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me
                    </p>
                    <h2>6</h2>
                    <p>i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir
                        after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me
                    </p>
                    <h2>7</h2>
                    <p>i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me i will always be, even lonely open in the sea.Did you get happeir
                        after leaving me i will always be, even lonely open in the sea.Did you get happeir after leaving me
                    </p>

                </div>
                <!-- Tag -->
                <div class="m-padded-lr-responsive">
                    <div class="ui basic teal left pointing label">Methodlogy</div>
                </div>
                <!-- Admire -->
                <div class="ui center aligned basic segment ">
                    <button id="payButton" class="ui orange basic circular button">Admire</button>
                </div>
                <div class="ui payQR flowing popup transition hidden">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size: inherit !important;">
                            <div class="image">
                                <img src="./static/images/code-image.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                <div class="">zhifubao</div>
                            </div>
                            <div class="image">
                                <img src="./static/images/code-image.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                <div class="">wechat</div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <div class="ui attached positive message">
                <div class="ui middle aligned grid">
                    <div class="eleven wide column">
                        <ui class="list">
                            <li>writer :GSWB</li>
                            <li>writer :GSWB</li>
                            <li>writer :GSWB</li>
                            <li>writer :GSWB</li>
                        </ui>
                    </div>
                    <div class="five wide column">
                        <img src="./static/images/code-image.jpg" class="ui right floated rounded bordered image" style="width: 110px" alt="">
                    </div>
                </div>
            </div>
            <div id="comment-container" class="ui bottom attached segment">
                <!-- message board -->
                <div class="ui teal segment">
                    <div class="ui form">
                        <div class="ui comments">
                            <h3 class="ui dividing header">Comments</h3>
                            <div class="comment">
                                <a class="avatar">
                                    <img src="static/images/zhangtou.jpeg">
                                </a>
                                <div class="content">
                                    <a class="author">Matt</a>
                                    <div class="metadata">
                                        <span class="date">Today at 5:42PM</span>
                                    </div>
                                    <div class="text">
                                        How artistic!
                                    </div>
                                    <div class="actions">
                                        <a class="reply">Reply</a>
                                    </div>
                                </div>
                            </div>
                            <div class="comment">
                                <a class="avatar">
                                    <img src="static/images/zhangtou.jpeg">
                                </a>
                                <div class="content">
                                    <a class="author">Elliot Fu</a>
                                    <div class="metadata">
                                        <span class="date">Yesterday at 12:30AM</span>
                                    </div>
                                    <div class="text">
                                        <p>This has been very useful for my research. Thanks as well!</p>
                                    </div>
                                    <div class="actions">
                                        <a class="reply">Reply</a>
                                    </div>
                                </div>
                                <div class="comments">
                                    <div class="comment">
                                        <a class="avatar">
                                            <img src="static/images/zhangtou.jpeg">
                                        </a>
                                        <div class="content">
                                            <a class="author">Jenny Hess</a>
                                            <div class="metadata">
                                                <span class="date">Just now</span>
                                            </div>
                                            <div class="text">
                                                Elliot you are always so right :)
                                            </div>
                                            <div class="actions">
                                                <a class="reply">Reply</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="comment">
                                <a class="avatar">
                                    <img src="static/images/zhangtou.jpeg">
                                </a>
                                <div class="content">
                                    <a class="author">Joe Henderson</a>
                                    <div class="metadata">
                                        <span class="date">5 days ago</span>
                                    </div>
                                    <div class="text">
                                        Dude, this is awesome. Thanks so much
                                    </div>
                                    <div class="actions">
                                        <a class="reply">Reply</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="ui form">
                    <div class="field">
                        <textarea name="content" id="" placeholder="please input comment"></textarea>
                    </div>
                    <div class="fields">
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="nickname" placeholder="name">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="mail icon"></i>
                                <input type="text" name="Email" placeholder="email">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <button class="ui teal button m-mobile-wide"><i class="edit icon"></i>Edit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="m-padded m-fixed m-right-bottom">
        <div class="ui vertical icon buttons ">
            <button type="button" class="ui toc teal button">CateLog</button>
            <a href="#comment-container" class="ui teal button">Message Board</a>
            <button class="ui wechat icon button"><i class="weixin icon"></i></button>
            <div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></div>
        </div>
    </div>
    <div class="ui toc-container flowing popup transition hidden" style="width:250px !important;">
        create CateLog
        <ol class="js-toc">

        </ol>
    </div>
    <div id="qrcode" class="ui wechat-qr flowing popup transition hidden">
        <!-- <img src="./static/images/zhang.jpg" alt="" class="ui rounded image" style="width:120px"> -->
    </div>
    <br>
    <br>

    <!--footer-->
    <footer class="ui inverted vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="./static/images/code-image.jpg" alt="" class="ui rounded image" style="width: 110px">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">Latest Blog</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">User Story</a>
                        <a href="#" class="item">Learning List</a>
                        <a href="#" class="item">fail to early</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">Contact Us</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Email:classicriver@qq.com</a>
                        <a href="#" class="item">QQ:1204263892</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">Explain</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">
                        This is my personal blog which records everything happend in my life.No matter what happend,I will always smile.
                    </p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny">
                Copyright @ 2019-2020 Lirenml Designed by GeniusTuang
            </p>
        </div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <script src="./static/lib/prism/prism.js"></script>
    <script src="./static/lib/tocbot/tocbot.min.js"></script>
    <script src="./static/lib/qrcode/qrcode.js"></script>

    <script>
        $('.menu.toggle').click(function() {
            $('.m-item').toggleClass('m-mobile-hide');
        });

        $('#payButton').popup({
            popup: $('.payQR.popup'),
            on: 'click',
            position: 'bottom center'
        });
        tocbot.init({
            //where to render the table of contents
            tocSelector: '.js-toc',
            //where to grab the headings to builder the table of contents
            contentSelector: '.js-toc-content',
            //which headings to grab inside of the contentSelector element
            headingSelect: 'h1, h2, h3',
        });
        $('.toc.button').popup({
            popup: $('.toc-container.popup'),
            on: 'click',
            position: 'left center'
        });
        $('.wechat').popup({
            popup: $('.wechat-qr'),
            position: 'left center'
        });
        var qrcode = new QRCode("qrcode", {
            text: "http://jindo.dev.naver.com/collie",
            width: 110,
            height: 110,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
        $('#toTop-button').click(function() {
            $(window).scrollTo(0, 500);
        });
    </script>
</body>

</html>